<template>
  <view class="bg">
    <view class="tag">在住</view>
  </view>
  <view class="padding-10">
    <view class="header justify-between">
      <view class="align-center">
        <view style="margin-right: 20rpx; color: #fff">
          {{ ReceiveDetail.GuestName }}
        </view>
        <view style="margin-right: 12rpx; color: #fff">
          {{ ReceiveDetail.Room }}
        </view>
        <view class="main flex-center" style="margin-right: 16rpx">主单</view>
        <view
          class="flex-center"
          style="margin-right: 16rpx; color: #fff"
          v-if="tab_index !== 2"
        >
          批量退房
        </view>
      </view>
      <view
        style="color: #409eff; padding-left: 0.5rem; color: #fff"
        @click="change_popup_show(true)"
        class="align-center"
      >
        联房列表
        <image
          src="@/static/images/room_status/detail/arrow-right.png"
          style="margin-left: 10rpx; width: 10rpx; height: 20rpx"
        ></image>
      </view>
    </view>

    <view class="content justify-between align-center">
      <view class="item">
        <view class="num">{{ ReceiveDetail.XiaoFei }}</view>
        <view class="text">消费</view>
      </view>
      <view class="item">
        <view class="num">{{ ReceiveDetail.FuKuan }}</view>
        <view class="text">收款</view>
      </view>
      <view class="item">
        <view class="num blue">{{ ReceiveDetail.Ysq }}</view>
        <view class="text">预授权</view>
      </view>
      <view class="item">
        <view class="num">
          {{
            $onFixPrecision(
              ReceiveDetail.FuKuan - ReceiveDetail.XiaoFei + ReceiveDetail.Ysq
            )
          }}
        </view>
        <view class="text">余额</view>
      </view>
    </view>
  </view>

  <u-popup
    closeable
    :show="popup_show"
    :round="25"
    :closeOnClickOverlay="true"
    @close="change_popup_show(false)"
  >
    <view style="padding: 30rpx">
      <view class="popup_title">联房列表</view>
      <view class="popup_content">
        <view
          class="content_item justify-between"
          :key="item.LinkId"
          v-for="item in ReceiveDetail.Links"
        >
          <view class="left flex">
            <view
              class="room_status room_master flex-center"
              v-if="item.Master"
            >
              主单
            </view>
            <view
              class="room_status flex-center"
              :style="{ background: room_status_color(item.State) }"
            >
              {{ get_receive_state(item.State) }}
            </view>
            <view class="room_no">{{ item.RoomNo }}</view>
            <view class="name">{{ item.GuestName }}</view>
            <view class="price">￥{{ item.Price }}</view>
          </view>
          <view class="right">退出{{ current_room_type }}</view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script lang="ts" setup>
import fn from '@/utils/fn'
import { ref, watch } from 'vue'
import { get_receive_state } from '@/storage/receive'
import { INF_ReceiveInfoV1_res } from '@/api/server/v1/receive'
import { init_ReceiveDetail } from '@/receivePages/detail/initState'
const { $onFixPrecision } = fn

const props = defineProps({
  ReceiveDetail: {
    type: Object,
    default: () => ({})
  },
  current_room_type: {
    type: String,
    default: ''
  },
  tab_index: {
    type: Number,
    default: 0
  }
})
const popup_show = ref(false)

const change_popup_show = function (bool: boolean) {
  popup_show.value = bool
}

const room_status_color = function (State: string) {
  switch (State) {
    case 'Out':
      return '#FF6C66'
    case 'Book':
      return '#F89900'
    default:
      return '#7DE'
  }
}
const current_room_type: any = ref('')
const ReceiveDetail = ref<INF_ReceiveInfoV1_res>(init_ReceiveDetail)
watch(
  () => props.ReceiveDetail,
  (value) => (ReceiveDetail.value = value as INF_ReceiveInfoV1_res),
  { immediate: true }
)
watch(
  () => props.current_room_type,
  (value) => {
    current_room_type.value = value
  },
  { immediate: true }
)
const tab_index = ref(1)
watch(
  () => props.tab_index,
  (value) => {
    tab_index.value = value
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
.padding-10 {
  position: relative;
  z-index: 10;
}
.bg {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  height: 220rpx;
  background: #409eff;
  position: absolute;
  z-index: 1;
  .tag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 86rpx;
    height: 36rpx;
    background: #47cc2a;
    border-radius: 8rpx 0rpx 0rpx 8rpx;
    font-size: 24rpx;
    color: #ffffff;
  }
}
.header {
  height: 3rem;
  .main {
    width: 72rpx;
    height: 32rpx;
    background: #f4af42;
    color: #fff;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    font-size: 24rpx;
  }
}
.content {
  box-sizing: border-box;
  width: 100%;
  height: 172rpx;
  background: #ffffff;
  box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.16);
  border-radius: 4rpx;
  padding: 0 52rpx;
  .item {
    text-align: center;
    padding-right: 52rpx;
    border-right: 1rpx #e5e5e5 solid;
    .blue {
      color: #409eff;
    }
    .num {
      font-weight: 500;
    }
    .text {
      font-size: 24rpx;
    }
  }
  .item:nth-child(4) {
    padding-right: 0;
    border-right: 0;
  }
}

.popup_title {
  text-align: center;
  font-weight: 500;
  padding: 30rpx;
  color: #333333;
  font-family:
    Source Han Sans CN-Medium,
    Source Han Sans CN;
}
.popup_content {
  font-size: 28rpx;
  .content_item {
    padding: 40rpx 0;
    border-bottom: 2rpx solid #f5f5f5;
    &:last-child {
      border: none;
    }
    .left {
      .room_status {
        width: 80rpx;
        height: 36rpx;
        color: white;
        border-radius: 4rpx;
        margin-right: 20rpx;
      }
      .room_master {
        background: #409eff;
        margin-right: 0rpx;
      }
      .room_no,
      .name,
      .price {
        margin-right: 40rpx;
      }
    }
    .right {
      color: #ff6c66;
    }
  }
}
</style>
